
<template>
  <div class="op-btn">
    <el-button  type="text" size="small"   @click="getDetial">编辑</el-button>
    <el-drawer
        title="编辑系统"
        :size="800"
        :wrapperClosable="false"
        :destroy-on-close="true"
        :visible.sync="drawer">
      <systemForm ref="systemForm"></systemForm>
      <div class="btnBox">
        <el-button type="info" plain style="margin-right: 30px" @click="drawer = false">取消</el-button>
        <el-button type="primary" style="margin-right: 20px" @click="submit">确定</el-button>

      </div>
    </el-drawer>
  </div>
</template>

<script>
import systemForm from "@/views/APImanage/module/systemForm";
export default {
  name: "editSystemBtn",
  components:{
    systemForm
  },
  props:{
    params:{
      default:()=>{}
    }
  },
  methods:{
    getDetial(){
      this.drawer = true
      this.$nextTick(()=>{
        this.$refs.systemForm.setData(this.params)
      })
    },
    submit(){
      this.$refs.systemForm.getData().then(data=>{
        let params = {
          id:this.params.id,
          ...data
        }
        this.$api.editApiSystem(params).then(res=>{
          this.$message.success('操作成功')
          this.$emit('after-op')
          this.drawer = false
        })
      })
    },
  },
  data(){
    return {
      drawer:false
    }
  },
}
</script>

<style scoped lang="less">
.btnBox{
  display: flex;
  flex-direction: row-reverse;
}
</style>